<template>
  <view class="disease-detail">
    <!-- 疾病基本信息 -->
    <view class="basic-info">
      <image class="cover-image" :src="disease.image" mode="aspectFill"></image>
      <view class="title-section">
        <text class="name">{{ disease.name }}</text>
        <text class="alias" v-if="disease.alias">{{ disease.alias }}</text>
      </view>
    </view>

    <!-- 内容导航 -->
    <view class="nav-section">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="nav-item"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 内容区域 -->
    <swiper class="content-swiper" :current="currentTab" @change="handleSwiperChange">
      <!-- 病因 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-view">
          <view class="content-section">
            <view class="section-item" v-for="(item, index) in disease.causes" :key="index">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.content }}</text>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 症状 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-view">
          <view class="content-section">
            <view class="section-item" v-for="(item, index) in disease.symptoms" :key="index">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.content }}</text>
              <view class="image-list" v-if="item.images && item.images.length">
                <image 
                  v-for="(img, imgIndex) in item.images" 
                  :key="imgIndex"
                  :src="img"
                  mode="aspectFill"
                  @tap="previewImage(item.images, imgIndex)"
                ></image>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 治疗方案 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-view">
          <view class="content-section">
            <view class="section-item" v-for="(item, index) in disease.treatments" :key="index">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.content }}</text>
              <view class="tips" v-if="item.tips && item.tips.length">
                <view class="tip-item" v-for="(tip, tipIndex) in item.tips" :key="tipIndex">
                  <text class="tip-icon">💡</text>
                  <text class="tip-text">{{ tip }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

    <!-- 快速问诊按钮 -->
    <view class="action-btn" @tap="handleConsultation">
      快速问诊
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      diseaseId: '',
      tabs: ['病因', '症状', '治疗方案'],
      currentTab: 0,
      disease: {
        name: '感冒',
        alias: '普通感冒、伤风',
        image: 'https://example.com/cold.jpg',
        causes: [
          {
            title: '病毒感染',
            content: '主要由病毒感染引起，如鼻病毒、冠状病毒等。'
          },
          {
            title: '季节变化',
            content: '气温骤变、免疫力下降时容易感冒。'
          }
        ],
        symptoms: [
          {
            title: '早期症状',
            content: '打喷嚏、流鼻涕、鼻塞、咽喉痛等。',
            images: ['https://example.com/symptom1.jpg']
          },
          {
            title: '常见症状',
            content: '发热、头痛、全身酸痛、乏力等。'
          }
        ],
        treatments: [
          {
            title: '对症治疗',
            content: '服用感冒药物，如布洛芬、对乙酰氨基酚等。',
            tips: [
              '多休息，保持充足睡眠',
              '多饮温水，注意保暖',
              '清淡饮食，避免刺激性食物'
            ]
          },
          {
            title: '中医治疗',
            content: '可选用板蓝根、金银花等中药进行调理。'
          }
        ]
      }
    }
  },

  onLoad(options) {
    if (options.id) {
      this.diseaseId = options.id
      this.loadDiseaseDetail()
    }
  },

  methods: {
    loadDiseaseDetail() {
      // 加载疾病详细信息
      // TODO: 调用接口获取数据
    },

    switchTab(index) {
      this.currentTab = index
    },

    handleSwiperChange(e) {
      this.currentTab = e.detail.current
    },

    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    },

    handleConsultation() {
      this.checkLoginBeforeAction(() => {
        uni.navigateTo({
          url: '/pages/consultation/consultation'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.disease-detail {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;

  .basic-info {
    background: #fff;
    
    .cover-image {
      width: 100%;
      height: 400rpx;
    }
    
    .title-section {
      padding: 30rpx;
      
      .name {
        font-size: 36rpx;
        color: #333;
        font-weight: bold;
        display: block;
        margin-bottom: 10rpx;
      }
      
      .alias {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .nav-section {
    display: flex;
    background: #fff;
    padding: 20rpx 0;
    margin-top: 20rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    
    .nav-item {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      position: relative;
      
      &.active {
        color: #007AFF;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: #007AFF;
          border-radius: 2rpx;
        }
      }
    }
  }

  .content-swiper {
    height: calc(100vh - 600rpx);
    
    .scroll-view {
      height: 100%;
    }
  }

  .content-section {
    padding: 30rpx;
    background: #fff;
    
    .section-item {
      margin-bottom: 40rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .item-title {
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .item-desc {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
      
      .image-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        
        image {
          width: 220rpx;
          height: 220rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          border-radius: 8rpx;
          
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
      
      .tips {
        margin-top: 20rpx;
        background: #f8f8f8;
        padding: 20rpx;
        border-radius: 8rpx;
        
        .tip-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 16rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .tip-icon {
            margin-right: 10rpx;
          }
          
          .tip-text {
            flex: 1;
            font-size: 26rpx;
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }

  .action-btn {
    position: fixed;
    left: 40rpx;
    right: 40rpx;
    bottom: 40rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #007AFF;
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    box-shadow: 0 4rpx 8rpx rgba(0,122,255,0.2);
  }
}
</style> 